/*
 * @FilePath: /my-map-demo/src/views/layer-management/zoom/config/config.js
 * @Author: 张文鑫
 * @Date: 2024-12-02 17:33:41
 * @Description:
 */
import { Feature } from "ol";
import { Vector as VectorSource } from "ol/source";
import { Vector as VectorLayer } from "ol/layer";
import { Icon, Style, Text, Fill, Stroke } from "ol/style";
import { Point } from "ol/geom";

import GeoJSON from "ol/format/GeoJSON";
import XYZ from "ol/source/XYZ";
import TileLayer from "ol/layer/Tile";
import { hangzhou } from "../../common/hangzhouAll";
// 导入城市数据
import { cities } from "@/views/layer-management/common/data.js";
// 天地图密钥
var key = "2b652d4e7858f5a1310620992c2cfe3c"; // 你的API Key
var siteindex = Math.round(Math.random() * 7); // 天地图的多个节点选择
// 天地图影像底图图层 （卫星图层）
export const img_wLayer = new TileLayer({
  source: new XYZ({
    url: "https://t" + siteindex + ".tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=" + key,
    crossOrigin: "Anonymous",
    cacheSize: 2048, // 提高缓存容量
    tileSize: 512, // 调整瓦片大小（增加瓦片尺寸，减少请求次数）
    tileLoadFunction: (imageTile, src) => {
      const image = new Image();
      image.onload = () => {
        imageTile.getImage().src = image.src;
      };
      // 支持 WebP 格式
      image.src = src.replace(/\.png$/, ".webp");
    },
  }),
  title: "影像底图",
  maxZoom: 18,
  zIndex: 0,
});

// 创建一个空的矢量图层
const vectorSource = new VectorSource();
// 动态生成城市标注
cities.forEach((city) => {
  const point = new Point(city.coords);
  const feature = new Feature({
    geometry: point,
    name: city.name, // 存储城市名称
  });

  // 为每个标注设置样式（可自定义图标）
  const iconStyle = new Style({
    image: new Icon({
      src: "https://openlayers.org/en/v6.9.0/examples/data/icon.png", // 图标路径
      scale: 0.5, // 图标缩放
      anchor: [0.5, 1], // 图标锚点，设置在底部中央
    }),
    text: new Text({
      text: city.name, // 使用城市名称作为标注文本
      font: "12px Arial", // 设置字体
      fill: new Fill({ color: "#000" }), // 设置文字颜色
      stroke: new Stroke({ color: "#fff", width: 3 }), // 文字描边
      offsetY: 10, // 向上偏移，使文字不被图标遮挡
    }),
  });
  feature.setStyle(iconStyle);

  // 将标注添加到矢量图层
  vectorSource.addFeature(feature);
});

// 创建矢量图层
export const vectorLayer = new VectorLayer({
  source: vectorSource,
  zIndex: 2, // 确保点标注图层在其他图层之上
});
//各个地区图层
export const districtLayer = new VectorLayer({
  source: new VectorSource({
    features: new GeoJSON().readFeatures(hangzhou),
    zIndex: 3, // 确保它位于影像图层之上
  }),

  style: (feature) => {
    const name = feature.get("name"); // 获取地区名称
    if (name === "临安区") {
      // 如果是临安区，设置特殊样式
      return new Style({
        fill: new Fill({
          color: "rgba(255, 255, 0, 0.3)", // 透明填充颜色
        }),
        stroke: new Stroke({
          color: "#FF0000", // 红色线框
          width: 3, // 线宽
        }),
        text: new Text({
          text: name,
          font: "14px bold sans-serif", // 更明显的字体
          fill: new Fill({ color: "#000" }), // 黑色文字
          stroke: new Stroke({ color: "#fff", width: 3 }), // 白色描边
        }),
      });
    }
    return new Style({
      fill: new Fill({
        color: "rgba(255, 255, 255, 0.8)", // 调整透明度
      }),
      stroke: new Stroke({
        color: "#319FD3",
        width: 1,
      }),
      text: new Text({
        text: feature.get("name"),
        font: "12px sans-serif",
        fill: new Fill({ color: "#000" }),
        stroke: new Stroke({ color: "#fff", width: 3 }),
      }),
    });
  },
});

// 在地图上双击时定位到区的中心
export const addDoubleClickListener = (map) => {
  map.on("dblclick", (event) => {
    // 阻止默认的双击放大行为
    event.preventDefault();
    // 获取双击位置
    const pixel = event.pixel;
    const coordinate = map.getCoordinateFromPixel(pixel);

    // 获取被点击的要素
    const feature = map.forEachFeatureAtPixel(pixel, (feat) => feat);

    if (feature) {
      // 获取区域几何的中心点
      const geometry = feature.getGeometry();
      const center =
        geometry.getType() === "Polygon" || geometry.getType() === "MultiPolygon"
          ? geometry.getClosestPoint(coordinate) // 获取多边形的最近点
          : geometry.getCoordinates(); // 获取点的坐标
      // 使用平滑过渡设置地图视图的中心
      map.getView().animate({
        center: center, // 目标中心点
        zoom: 10, // 设置目标缩放级别
        duration: 800, // 动画持续时间（1秒）
      });
    }
  });
};
